<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>厦门大学</title>
    <link rel="stylesheet" href="http://127.0.0.1:5500/xiamen/normalize.css ">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="./css/c.css">
    
</head>
<body>
    <!-- 轮播图区域（包含透明导航栏） -->
    <section class="hero">
        
        <!-- 透明导航栏容器 -->
        <div class="header-wrapper">
            <!-- Logo区域 -->
            <div class="logo-box">
                <img src="https://www.xmu.edu.cn/images/logo.png" alt="厦门大学Logo" onerror="this.src='https://picsum.photos/200/80?xmu-logo'; this.onerror=null;">
            </div>
            
            <!-- 右侧导航文字区域 -->
            <div class="nav-text-wrapper">
                <!-- 顶部用户入口 -->
                <div class="header-top">
                    <div class="user-nav">
                        <a href="#">未来学生</a>
                        <a href="#">在校学生</a>
                        <a href="#">教职员工</a>
                        <a href="#">厦大校友</a>
                        <a href="#">公共访问</a>
                        <a href="#">我要捐赠</a>
                        <a href="#" class="en-link"><i class="fa fa-globe"></i> English</a>
                    </div>
                </div>

                <!-- 主导航 -->
                <div class="main-nav-box">
                    <ul class="main-nav">
                        <li><a href="#">首页</a></li>
                        <li>
                            <a href="#">厦大概览</a>
                            <div class="dropdown-menu">
                                <a href="#">学校简介</a>
                                <a href="#">厦门大学章程</a>
                                <a href="#">校主生平</a>
                                <a href="#">现任领导</a>
                                <a href="#">历任领导</a>
                                <a href="#">组织机构</a>
                                <a href="#">学校标识</a>
                                <a href="#">学院院徽</a>
                                <a href="#">网上展馆</a>
                                <a href="#">校园地图</a>
                                <a href="#">校园风光</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">学部院系</a>
                            <div class="dropdown-menu">
                                <a href="#">人文与艺术学部</a>
                                <a href="#">社会科学学部</a>
                                <a href="#">自然科学学部</a>
                                <a href="#">工程技术学部</a>
                                <a href="#">医学与生命科学学部</a>
                                <a href="#">地球科学与技术学部</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">人才培养</a>
                            <div class="dropdown-menu">
                                <a href="#">学科</a>
                                <a href="#">师资</a>
                                <a href="#">教师主页平台</a>
                                <a href="#">本科生教育</a>
                                <a href="#">研究生教育</a>
                                <a href="#">继续教育与网络教育</a>
                                <a href="#">国际学生教育</a>
                                <a href="#">管理</a>
                            </div>
                        </li>
                        <li>
                            <a href="#">学术科研</a>
                            <div class="dropdown-menu">
                                <a href="#">自然科学与技术</a>
                                <a href="#">人文与社会科学</a>
                                <a href="#">研究机构</a>
                                <a href="#">博士后科研流动站</a>
                                <a href="#">厦门大学学报</a>
                            </div>
                        </li>
                        <li><a href="#">社会服务</a>
                            <div class="dropdown-menu">
                                <a href="#">成果产业化</a>
                                <a href="#">大学科技园</a>
                                <a href="#">战略合作</a>
                                <a href="#">后勤服务</a>
                                <a href="#">会议服务</a>
                                <a href="#">出版服务</a>
                            </div>
                        </li>
                        <li><a href="#">大学文化</a>
                            <div class="dropdown-menu">
                                <a href="#">团委</a>
                                <a href="#">校园活动</a>
                            </div>
                        </li>
                        <li><a href="#">合作交流</a>
                            <div class="dropdown-menu">
                                <a href="#">国际合作与交流</a>
                                <a href="#">港澳台合作与交流</a>
                                <a href="#">孔子学院</a>
                                <a href="#">留学服务</a>
                            </div>
                        </li>
                        <li><a href="#">招生就业</a>
                            <div class="dropdown-menu">
                                <a href="#">招生</a>
                                <a href="#">就业</a>
                            </div>
                        </li>
                        <li><a href="#">人才招聘</a>
                            <div class="dropdown-menu">
                                <a href="#">人才招聘网</a>
                                <a href="#">博士后</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 轮播图内容 -->
        <div class="slider">
            <div class="slide active" style="background-image: url('https://www.xmu.edu.cn/images/2025shuxiang.jpg')"></div>
            <div class="slide" style="background-image: url('https://www.xmu.edu.cn/images/2025fenghua.jpg')"></div>
            <div class="slide" style="background-image: url('https://www.xmu.edu.cn/images/2025qiujing.jpg')"></div>
            <div class="slide" style="background-image: url('https://www.xmu.edu.cn/images/2025sizhong.jpg')"></div>
            <div class="slide" style="background-image: url('https://www.xmu.edu.cn/images/2025luntan.jpg')"></div>

        <!-- 轮播控制按钮 -->
        <div class="slider-controls">
            <button class="prev-btn"><i class="fa fa-angle-left"></i></button>
            <button class="next-btn"><i class="fa fa-angle-right"></i></button>
        </div>

        <!-- 轮播指示器 -->
        <div class="slider-indicators">
            <span class="indicator active" data-index="0">1</span>
            <span class="indicator" data-index="1">2</span>
            <span class="indicator" data-index="2">3</span>
            <span class="indicator" data-index="3">4</span>
            <span class="indicator" data-index="4">5</span>
        </div>
    </section>
    <!-- 新增“新闻卡片列表”模块 -->
<section class="news-cards">
  <div class="container">
    <div class="cards-grid">
      <!-- 卡片1 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?event1" alt="2025年校运会">
        <p>2025年校运会 “燃”动全场</p>
      </div>
      <!-- 卡片2 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?news1" alt="喜报">
        <p>喜传捷报：厦大再捧 “大挑” 优胜杯！</p>
      </div>
      <!-- 卡片3 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?meeting1" alt="校党委会议">
        <p>校党委常委会（扩大）会议暨党委理论学习中心组学习...</p>
      </div>
      <!-- 卡片4 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?lecture1" alt="党员大课">
        <p>厦门大学举办2025年师生党员第三次集中大课</p>
      </div>
      <!-- 卡片5 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?flag1" alt="升旗仪式">
        <p>厦门大学举行国庆升旗仪式</p>
      </div>
      <!-- 卡片6 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?martyrs1" alt="烈士纪念日">
        <p>缅怀革命英烈 传承红色基因——学校举行2025年烈士纪念日活动</p>
      </div>
      <!-- 卡片7 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?study1" alt="理论学习">
        <p>校党委理论学习中心组集体学习习近平总书记给...</p>
      </div>
      <!-- 卡片8 -->
      <div class="card-item">
        <img src="https://picsum.photos/300/200?nature1" alt="Nature论文">
        <p>厦大学者Nature发文 首次提出动态神经蠕虫电极概念</p>
      </div>
    </div>
    <button class="view-more-btn">查看更多</button>
  </div>
  <section class="media-xmu">
    <div class="media-header">
        <div class="media-tab active" data-tab="news">
            <i class="fa fa-newspaper-o"></i> 新闻纵横
        </div>
        <div class="media-tab" data-tab="media">
            <i class="fa fa-film"></i> 媒体厦大
        </div>
    </div>
     <!-- 新闻纵横内容 -->
    <div class="media-content">
        <div class="tab-panel active" id="news">
            <ul class="news-list">
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">                      
                        <a href="#" class="news-title">光明日报：人工智能人才培养加速成发展"快节奏"</a>
                        <p class="news-desc">在人工智能专业扩展的基础上，如何提升这一专业的人才培养质量、加强专业的沟通建设、提高核心能。</p>
                        <span class="news-date">2025-10-22</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">"艺术美学与弘扬美育精神"座谈交流会暨"风华正茂"大型原创音乐史诗题展演举行</a>
                        <p class="news-desc">为深入学习实践及创作文化思想，贯彻落实习近平总书记关于文艺工作重要论述和研究部署，在全省。</p>
                        <span class="news-date">2025-11-10</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">校领导调研的问卷和项目类型</a>
                        <p class="news-desc">校领导调研的问卷分为两方面分为四组，因校对调研经验较重而有所差异，并推动了学术建设和中华文化。</p>
                        <span class="news-date">2025-11-05</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">泉州市委组织部副队长张文强</a>
                        <p class="news-desc">10月31日上午，泉州市委常委、组织部部长胡元明来到校交流。校长张文强是校领导，校党委副书记。</p>
                        <span class="news-date">2025-11-03</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">"考古""手艺""AI医生"光影重生的传承</a>
                        <p class="news-desc">在厦门大学——新东方博物馆联合实验室（以下简称"实验室"）中，一支名"独家术"的电影特辑。</p>
                        <span class="news-date">2025-11-04</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">厦门大学召开"深入学习贯彻习近平总书记在全国特殊教师代表重要回馈精神"报告会</a>
                        <p class="news-desc">11月7日，厦门大学在昆明校区科学艺术中心参加厦门召开"深入学习贯彻习近平总书记在全国特殊教师代表大会"。</p>
                        <span class="news-date">2025-11-09</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 媒体厦大内容 -->
        <div class="tab-panel" id="media">
            <ul class="news-list">
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">中国科技网：多源互济的储能创新平台打造能源安全"智慧方舟"</a>
                        <p class="news-desc">在厦门大学翔安校区能源学院楼内，一台台基于先进电源、负载构成的小型微电网系统悄然运转...</p>
                        <span class="news-date">2025-09-26</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">人民日报：高校博物馆等成为激励学生传承文脉、砥砺前行的资源——校园"宝藏"...</a>
                        <p class="news-desc">"胜利的日子就快来了，今年就可以打败霉菌，明年就要反攻日本，那时候才是咱们团圆的时候！...</p>
                        <span class="news-date">2025-09-25</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">中国科学报：黄本立：光谱人生，家国情怀</a>
                        <p class="news-desc">黄本立 厦门大学供图光谱分析这项被誉为现代科学研究和工业生产"慧眼"的技术，已广泛应用于...</p>
                        <span class="news-date">2025-09-22</span>
                    </div>
                </li>
                <li class="news-item">
                    <div class="media-icon">
                        <img src="https://www.xmu.edu.cn/virtual_attach_file.vsb?afc=5MRfCRnzGaLR-4MQRLYM7L4n77sU4vq8o7lPLRVfoRCaU8L0gihFp2hmCIa0UShfMSyYn1hRM4fkUl7PM7-PolVVM7rRM8V7MR9soR9sM4WFMz7sL7UYMNrFMmv4gtXaQ4Oeo4xZp5l0qIbtpYyxLYyxLYbw62p8c&e=.jpg">
                    </div>
                    <div class="news-info">
                        <a href="#" class="news-title">新华网：让传感器动起来 我国科研团队研发出脑机接口动态电极</a>
                        <p class="news-desc">我国科研团队研发出了一种柔性纤维电极，植入动物大脑后，其运动可以受人工控制，还可以在动...</p>
                        <span class="news-date">2025-09-18</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    <a href="#" class="view-more">查看更多</a>
</section>
</section>
    <!-- 学校简介 -->
    <section class="about">
        <div class="container">
            <h2><i class="fa fa-info-circle"></i> 关于厦门大学</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://picsum.photos/400/300?xmu-intro" alt="厦门大学风光"
                         onerror="this.src='https://picsum.photos/400/300?fallback-intro'; this.onerror=null;">
                </div>
                <div class="about-text">
                    <p>厦门大学由著名爱国华侨领袖陈嘉庚先生于1921年创办，是中国近代教育史上第一所华侨创办的大学，也是国家“211工程”“985工程”重点建设高校和国家“双一流”建设高校。</p>
                    <p>学校现有思明、翔安、漳州三个校区，占地9700多亩，设有6个学部、34个学院（直属系）和10个研究院，学科覆盖12个门类，形成了特色鲜明、优势突出的学科体系。</p>
                    <p>学校始终秉承“自强不息，止于至善”的校训，致力于培养具有创新精神和社会责任感的高素质人才。</p>
                    <a href="#" class="more-btn"><i class="fa fa-arrow-right"></i> 了解更多</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 最新公告 -->
    <section class="news">
        <div class="container">
            <h2><i class="fa fa-bullhorn"></i> 最新公告</h2>
            <div class="news-list">
                <div class="news-item">
                    <span class="date">2024-10-20</span>
                    <a href="#">关于开展2024年秋季学期期中教学检查的通知</a>
                </div>
                <div class="news-item">
                    <span class="date">2024-10-18</span>
                    <a href="#">厦门大学2025年博士研究生招生简章</a>
                </div>
                <div class="news-item">
                    <span class="date">2024-10-15</span>
                    <a href="#">关于举办"厦门大学建校103周年"系列活动的通知</a>
                </div>
                <div class="news-item">
                    <span class="date">2024-10-12</span>
                    <a href="#">2024年厦门大学国际学术会议日程安排</a>
                </div>
                <div class="news-item">
                    <span class="date">2024-10-10</span>
                    <a href="#">关于2024年冬季学期课程选课的通知</a>
                </div>
            </div>
            <a href="#" class="more-news"><i class="fa fa-list"></i> 查看全部公告</a>
        </div>
    </section>

    <!-- 校园活动 -->
    <section class="events">
        <div class="container">
            <h2><i class="fa fa-calendar"></i> 校园活动</h2>
            <div class="events-grid">
                <div class="event-card">
                    <img src="https://picsum.photos/400/300?xmu-event1" alt="学术讲座"
                         onerror="this.src='https://picsum.photos/400/300?fallback-event'; this.onerror=null;">
                    <div class="event-info">
                        <h3>人工智能与未来社会学术论坛</h3>
                        <p class="event-date"><i class="fa fa-clock-o"></i> 2024-10-25 | <i class="fa fa-map-marker"></i> 科学艺术中心</p>
                        <p>邀请国内外知名专家探讨人工智能发展趋势及社会影响，设置互动问答环节。</p>
                        <a href="#" class="event-link"><i class="fa fa-angle-right"></i> 查看详情</a>
                    </div>
                </div>
                <div class="event-card">
                    <img src="https://picsum.photos/400/300?xmu-event2" alt="校园招聘会"
                         onerror="this.src='https://picsum.photos/400/300?fallback-event'; this.onerror=null;">
                    <div class="event-info">
                        <h3>2025届毕业生秋季招聘会</h3>
                        <p class="event-date"><i class="fa fa-clock-o"></i> 2024-11-05 | <i class="fa fa-map-marker"></i> 学生活动中心</p>
                        <p>近300家用人单位参会，涵盖IT、金融、教育等多个领域，提供岗位5000余个。</p>
                        <a href="#" class="event-link"><i class="fa fa-angle-right"></i> 查看详情</a>
                    </div>
                </div>
                <div class="event-card">
                    <img src="https://picsum.photos/400/300?xmu-event3" alt="校园文化节"
                         onerror="this.src='https://picsum.photos/400/300?fallback-event'; this.onerror=null;">
                    <div class="event-info">
                        <h3>第十四届校园文化艺术节</h3>
                        <p class="event-date"><i class="fa fa-clock-o"></i> 2024-11-10 至 11-30 | <i class="fa fa-map-marker"></i> 各校区</p>
                        <p>包含文艺汇演、书画展、摄影比赛、非遗体验等12项活动，丰富校园文化生活。</p>
                        <a href="#" class="event-link"><i class="fa fa-angle-right"></i> 查看详情</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <div class="footer-top">
            <div class="container">
                <div class="footer-top-content">
                    <div class="footer-icon-group">
                        <div class="footer-icon-item">
                            <i class="fa fa-book"></i>
                            <span>数字图书馆</span>
                        </div>
                        <div class="footer-icon-item">
                            <i class="fa fa-building"></i>
                            <span>网上展馆</span>
                        </div>
                        <div class="footer-icon-item">
                            <i class="fa fa-heart"></i>
                            <span>我要捐赠</span>
                        </div>
                    </div>
                    <div class="footer-quick-links">
                        <h3>快速链接</h3>
                        <ul class="quick-links-list">
                            <li><a href="#">官方微博</a></li>
                            <li><a href="#">易班厦大</a></li>
                            <li><a href="#">数字图书馆</a></li>
                            <li><a href="#">校友服务</a></li>
                            <li><a href="#">教育基金会</a></li>
                            <li><a href="#">马来西亚分校</a></li>
                            <li><a href="#">嘉庚学院</a></li>
                            <li><a href="#">国际学院</a></li>
                            <li><a href="#">信息公开</a></li>
                            <li><a href="#">校务信箱</a></li>
                            <li><a href="#">国际中文教育学院/海外教育学院</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="footer-bottom-content">
                    <div class="footer-logo">
                        <img src="https://www.xmu.edu.cn/images/logo.png" alt="厦门大学Logo">
                    </div>
                    <div class="footer-contact">
                        <p>厦大总值班电话：0592-2186110</p>
                        <p>地址：福建省厦门市思明区思明南路422号 邮政编码：361005</p>
                        <p>闽ICP备05005471号 闽公网安备 35020302001480号</p>
                    </div>
                    <div class="footer-social">
                        <a href="#" class="social-icon weibo"><i class="fa fa-weibo"></i></a>
                        <a href="#" class="social-icon wechat"><i class="fa fa-weixin"></i></a>
                        <a href="#" class="social-icon douyin"><i class="fa fa-music"></i></a>
                        <a href="#" class="social-icon email"><i class="fa fa-envelope"></i></a>
                    </div>
                </div>
                <div class="copyright">
                    <p>版权所有©厦门大学</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- 引入JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>